<template>
  <div id="bread">
    <img :src="picture" alt="" />
    <router-link
      v-for="(item, index) in data"
      :key="item.title"
      :to="item.path"
    >
      <span
        >{{ item.title }}<a-icon v-if="index !== data.length - 1" type="right"
      /></span>
    </router-link>
  </div>
</template>

<script>
import { Icon } from 'ant-design-vue'
export default {
  components: {
    AIcon: Icon
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    picture: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped lang="less">
#bread {
  display: flex;
  align-items: center;
  img {
    width: 16px;
    height: 16px;
    margin-right: 10px;
  }
  a {
    color: #888888;
    font-size: 12px;
    i {
      margin: 0 10px;
    }
    &:last-child {
      color: #353b48;
    }
  }
}
</style>
